<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in imagebox" :key="item.id">
      <img :src="item.idView" class="image">
    </el-carousel-item>
  </el-carousel>
  <div class="parent">
    <div class="shadow" @click="$router.push('/work')">
        <h1>车检预约</h1>
        <p>专业车检 在线预约</p>
        <img class="tu" :src="img1">
    </div>
    <div class="shadow1" @click="$router.push('/first/map')">
      <h1>车检站点</h1>
      <p>多个站点 预约到店</p>
      <img class="tu" :src="img2">
    </div>
  </div>
  <div class="parent1">
    <div class="shadow2">
      <h1>违章办理</h1>
      <p>秒查违章 一键办理</p>
      <img class="tu" :src="img3">
    </div>
    <div class="shadow3" @click="$router.push('/permission')">
      <h1>便民服务</h1>
      <p>服务生活 方便于民</p>
      <img class="tu" :src="img4">
    </div>
  </div>
  <div class="chang">
    <h1 class="news">新闻咨询</h1>
    <p class="gg">更多>></p>
  </div>

  <div class="nei">
    <img class="ao" :src="img5">
    <h4 class="ma">马克龙带着“怪蜀黍”访华</h4>
    <p class="fa">法国总统马克龙对中国进行首次国事访问，在西安大明宫遗址公园观看了仿古入城式，在其同行成员中，有位衣着打扮与众不同的“怪蜀黍”，他头戴礼帽，胸系颜色鲜亮的丝质领结一脸络腮胡，恍若刚从19世纪法国贵族的宴会中.</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      direction: 'btt',

      imagebox: [
        { id: 0, idView: ('../src/assets/index/qq.png') },
        { id: 1, idView: ('../src/assets/index/ww.png') },
        { id: 2, idView: ('../src/assets/index/ee.png') },

      ],
      // 浏览器宽度
      screenWidth: 0
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
    },
    //下面是自适应框体大小的设置
    setSize: function () {
      // 通过浏览器宽度(图片宽度)实现计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    }
  }
}
</script>
<script setup>
import { ref } from 'vue'

import img1 from '@/assets/index/11.png';
import img2 from '@/assets/index/22.png';
import img3 from '@/assets/index/333.png';
import img4 from '@/assets/index/44.png';
import img5 from '@/assets/index/news.png';


</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 250px;
  height: 200px;
}

.shadow {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 185px;
  height: 100px;
  margin-top: 10px;
  background-color: white;
}

.shadow1 {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 185px;
  height: 100px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: white;
}

.parent{
  display: flex;
}

.parent1{
  display: flex;
}

.shadow2 {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 185px;
  height: 100px;
  margin-top: 3px;
  background-color: white;
}

.shadow3 {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 185px;
  height: 100px;
  margin-top: 3px;
  margin-left: 5px;
  background-color: white;
}

.chang{
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: white;
  display: flex;
}

h1 {
  font-size: 15px;
  color: #333;
  margin-left: 10px;
  margin-top: 25px;
}

p {
  font-size: 10px;
  color: #666;
  margin-left: 10px;
}

.tu {
  width: 80px;
  height: 50px;
  margin-left: 105px;
  margin-top: -90px;
}

.news {
  margin-left: 15px;
  margin-top: 10px;
}

.gg {
  margin-left: 265px;
  margin-top: 12px;
  font-size: 11px;
}

.nei {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 160px;
  margin-top: 2px;
  background-color: white;
  display: flex;
}

.ao {
  width: 140px;
  height: 140px;
  margin-top: 5px;
  margin-left: 15px;
}

.ma{
  font-size: 12px;
  margin-left: 10px;
  /*transform: rotate(90deg)*/
}

.fa {

}

.service-item1 {
  font-size: 13px;
  color: black;
  font-weight: bold;
}

.service-item2 {
  font-size: 13px;
  color: black;
  font-weight: bold;
}

.service-item3 {
  font-size: 13px;
  color: black;
  font-weight: bold;
}
</style>